<template>
	<el-card>
		<!-- 搜索 -->
		<el-form :model="searchData" inline ref="searchFormRef" v-resize="searchResize" label-width="90px">
			<el-form-item label="学生姓名" prop="kgName">
				<el-input v-model="searchData.studentName" placeholder="请输入学生姓名" clearable></el-input>
			</el-form-item>
			
			<el-form-item>
				<el-button icon="el-icon-search" type="primary" @click="searchClick">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="resetClick">重置</el-button>
			</el-form-item>
		</el-form>


		<!-- 幼儿园卡片 -->
		<!-- 标题颜色 -->
		<el-card ref="tableRef" class="card-block" style="flex: 1;min-width: 550px;margin-right: 10px; color: #409EFF" header="幼儿园列表" >
			<div style="display: flex;flex-wrap: wrap; ">
				
				<div v-for="(item,index) in kgList" 
				
				style="width: 100px;padding: 50px 80px;
				text-align: center;display: flex;justify-content: center; ">
					<!-- 文字+图标 -->
					<div style="text-align: center; ">
						
						<!-- 图标颜色 图标的边框-->
						<!-- 点击事件@dblclic=""  -->
						<div @dblclick="linkToClass(item.id)"  
						
						style="display: flex;   align-items: center;  justify-content: center;   
						 width: 100px; height: 100px;border-radius: 8px;
						border: 1px solid ; border-radius:50%" >
							<i class="el-icon-picture-outline-round" style="font-size: 50px;"
							 ></i>
						</div>
						<!-- 字体样式 -->
						<div style="color: #333;font-size: .875rem;font-weight: 400;line-height: 1.5715">
							{{item.kgName}}
						</div>

					</div>
				</div>
			</div>
		</el-card>
	</el-card>
</template>

<script>
	export default {

		data() {
			return {

				//搜索条件
				searchData: {
					studentName: null,
				},
			
				//幼儿园列表
				kgList:[]
			};
		},
		mounted() {
			this.$nextTick(() => {
				//this.$refs.tableRef.shuaxin(this.searchData);
				this.getKgList();
			});
			

		},
		methods: {

			//跳转至班级列表
			linkToClass(kgId){
				this.$router.push({
					path: '/class_picture',
					query:{
						kgId:kgId
					}
				})
			},
		  
			//获取幼儿园列表
			getKgList() {
				this.$api.sysKgFindAllByList().then(data => {
					this.kgList = data;
				});
			},


			//搜索重置
			searchResize(data) {
				this.$refs.tableRef.refreshSize(data)
			},

			

			//搜索按钮
			searchClick() {
				//搜索学生姓名
				//跳转至图片搜索页面
				this.$router.push({
					path: '/photo_search',
					query:{
						studentName:this.searchData.studentName
					}
				})


			},
			//重置按钮
			resetClick() {
				//this.$refs.searchFormRef.resetFields();
				//this.searchClick()
			},
		},
	};
</script>

<style lang="scss" scoped>
</style>
